<template>
	<view class="zxc_centent">
	<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		<u-navbar title="首页" bgColor="#07c160" :placeholder="true" :border="false" leftIcon=" " :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar>
	<!-- #endif -->
		<view style="height:100upx">
			<view class="jkl">
				<view class="jkl_left">
					 <pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					         <text v-if="!regionName">
								 {{defaultRegion[1]}}
							 </text> 
							 <text v-else>{{regionName}}</text>
					  </pick-regions>
					<image src="../../static/images/bottom.png" mode="widthFix" class="bottom_img"></image>
				</view>
				<view class="jkl_right">
					<u-search placeholder="搜索您想要的项目" v-model="keyword" :showAction="false" @search="search"></u-search>
				</view>
			</view>
		</view>
		<!-- end -->
		<u-swiper
		          :list="list1"
				   radius="0"
				   indicator
				   height="200"
		          @click="click"
		  ></u-swiper>
		  
		  
		  <view class="tab">
			  <view :class="tab_current == index ? 'tab_sm tab_sm_active' : 'tab_sm'" v-for="(item,index) in tab" @click="changetab(index)">
						{{item}}
			  </view>
		  </view>
		  
		  <view class="label">热门项目</view>
		  <!-- list -->
		  <view class="list">
			  <view class="list_left" @click="nav">
				  <image src="../../static/images/anmo.png" class="list_img" mode="widthFix"></image>
			  </view>
			  <view class="list_right">
			  			<view class="list_right_left">
							<view class="title"  @click="nav">
								古法推拿
							</view>
							<view class="text">
								<image src="../../static/images/time.png" mode="widthFix" style="width: 30upx;margin-right:10upx"></image>
								60分钟
							</view>
							<view class="text">
								<text class="money">￥219</text>
								￥499（已售出4460）
							</view>
							<view class="text">
								商户地址：广东省东莞市山沟沟村
							</view>
						</view> 
						<view class="list_right_right" @click="nav">
								查看项目
						</view> 
			  </view>
		  </view>
		  <!-- end -->
		  
		   <view class="label">附近商户</view>
		   <view class="list">
		   			  <view class="list_left" @click="nav2">
		   				  <image src="http://192.168.1.4:9000/hotel/2023/07/19/ffe9903d46a04cae9a90fd9f13e53fe7.png" class="list_img" mode="widthFix"></image>
		   			  </view>
		   			  <view class="list_right">
		   			  			<view class="list_right_left">
		   							<view class="title"  @click="nav">
		   								白金汉宫足浴店
		   							</view>
		   							<view class="text">
		   								<image src="../../static/images/ico-addr.png" mode="widthFix" style="width: 30upx;margin-right:10upx"></image>
		   								距您3km
		   							</view>
		   							<view class="text">
		   								地址：广东省东莞市山沟沟村
		   							</view>
		   						</view> 
		   						<view class="list_right_right" @click="nav2">
		   								查看门店
		   						</view> 
		   			  </view>
		   </view>
		   
		  

	<!-- 	 <u-tabbar
		 	:value="value1"
		 	@change="change"
		 	:fixed="true"
		 	:placeholder="false"
		 	activeColor="#07c160"
		 	:safeAreaInsetBottom="false"
		 >
		 	<u-tabbar-item text="首页">
		 	<image
		 		class="u-page__item__slot-icon"
		 		slot="active-icon"
		 		src="/static/images/u11.png"
		 	></image>
		 	<image
		 		class="u-page__item__slot-icon"
		 		slot="inactive-icon"
		 		src="/static/images/u1.png"
		 	></image>
		 	</u-tabbar-item>
		 	<u-tabbar-item text="技师" >
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/images/u22.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/images/u2.png"
				></image>
			</u-tabbar-item>
		 	<u-tabbar-item text="订单">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/images/u33.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/images/u3.png"
				></image>
			</u-tabbar-item>
		 	<u-tabbar-item text="我的">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/images/u44.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/images/u4.png"
				></image>
			</u-tabbar-item>
		 </u-tabbar> -->
		 <!-- end -->
			
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default{
		components:{
			 pickRegions
		},
		data (){
			return {
				 regionName:'',
				 region:[],
				 defaultRegion:['广东省','广州市','番禺区'],
				 defaultRegionCode:'440113',
				keyword: '',
				 list1: [{
				                    url: '/static/images/banner1.png'
				                },{
				                    url: '/static/images/banner1.png'
				                }],
								
				value1: 0,  //tarbar
				tab:['综合排序','价格','销量','好评率'],
				tab_current:0
			}
		},
		methods:{
			search (e){
				console.log(e)
			},
			click (e){
				console.log(e)
			},
			nav (){
				uni.navigateTo({
					url:'/pagesA/detail/index'
				})
			},
			nav2 (){
				uni.navigateTo({
					url:'/pagesA/store/index'
				})
			},
			 // 获取选择的地区
			 handleGetRegion(region){
			     this.region = region;
				 this.regionName=this.region[1].name;
				 console.log(this.region)
			   },
			change (index){
				console.log(index)
				this.value=index;
				if(this.value == 0){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
				if(this.value == 1){
					uni.reLaunch({
						url:'/pages/item/index'
					})
				}
				if(this.value == 2){
					uni.reLaunch({
						url:'/pages/order/index'
					})
				}
				if(this.value == 3){
					uni.reLaunch({
						url:'/pagesA/my/index'
					})
				}
			},
			changetab (index){
				this.tab_current=index;
			}
		}
	}
</script>

<style lang="scss">
	.zxc_centent{
		padding: 0;
		background-color: #fff;
	}
	.label{
		width:93%;
		border-left:10upx solid #34c97b;
		margin:30upx auto 10upx;
		font-size: 30upx;
		font-weight: 700;
		padding-left:15upx;
	}
.jkl{
		background-color: #07c160;
		color:#fff;
		text-align: center;
		// position: fixed;
		height:100upx;
		line-height: 100upx;
		text-align: center;
		width: 94%;
		padding:0 3%;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.jkl_left{
		width: 23%;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		overflow-x: auto;
	}
	.jkl_right{
		width: 77%;
	}
	.bottom_img{
		width: 25upx;
		margin-left:10upx;
	}
	.tab{
		width:100%;
		padding:30upx 0;
		border-radius: 20upx 20upx 0 0;
		border-bottom:2upx solid #ededed;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:-50upx;
		z-index: 9;
		position: relative;
	}
	.tab_sm{
		flex:1;
		text-align: center;
		font-size:28upx;
	}
	.tab_sm_active{
		flex:1;
		text-align: center;
		font-size:28upx;
		color:#07c160;
	}
	.list{
		padding:20upx;
		border-bottom:1upx solid #ededed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}
	.list_left{
		width: 25%;
	}
	.list_img{
		width: 100%;
		border-radius: 10upx;
	}
	.list_right{
		width: 72%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.list_right_left{
		width: 100%;
		color:#999;
		font-size:24upx;
	}
	.title{
		font-size:30upx;
		font-weight: 700;
		color:#000;
	}
	.text{
		margin-top:20upx;
		display: flex;
		align-items: center;
	}
	.money{
		color:#ff6c00;
		font-size:30upx;
		font-weight: 700;
		margin-right:10upx;
	}
	.list_right_right{
		    background-color: #07c160;
		    color: #fff;
			border-radius: 100upx;
			font-size:24upx;
			white-space: nowrap;
			padding:10upx 20upx;
			position: absolute;
			right:0;
			z-index: 9;
	}
	.jishi_list{
		padding:30upx;
		width:80vw;
		height:70vh;
		overflow-y: auto;
	}
	::v-deep .u-popup__content{
		border-radius: 10upx;
	}
	.tou_img{
		border-radius: 100upx;
	}
	.yue_time{
		color:#07c160;
		border:2upx solid #07c160;
		padding:10upx;
		font-size:22upx;
		margin-left:20upx;
	}
	.oks{
		display: flex;
		align-items: center;
	}
	.ikc{
		margin-left:20upx;
	}
	.ujc{
		display: flex;
		align-items: center;
		margin-left:20upx;
	}
	.jvb{
		width: 100%;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		border-radius: 100upx;
		font-size:24upx;
		white-space: nowrap;
		padding:15upx 0;
	}
</style>